import React from 'react';
import './ShopCartList.less';
import {Empty,SwipeAction} from 'antd-mobile';
import { filterPrice } from '../../../filters';
const rightActions = [
  {
    key: 'delete',
    text: '删除',
    color: 'danger',
    onClick:()=>{

    }
  },
];

export default function ShopCartList(props) {
    let {title, goodsArr, changeNum, allChecked, listCheck,allListCheck} = props;
  return (
    <div className='ShopCartList'>
        <div className="modules">
        <div className="head">
            <input type="checkbox" checked={allChecked} onChange={()=>allListCheck(goodsArr,title)}/>
            <h3>{title}</h3>
        </div>
        {
            goodsArr?<ul>
            {goodsArr.map((item,index)=>{
                      return <SwipeAction
                      key={item.id}
                      rightActions={rightActions}
                    ><li key={item.id}>
                          <input type="checkbox" checked={item.Checked} onChange={()=>listCheck(goodsArr,index,item.type)}/>
                        <div className="left">
                          <img src={item.img} alt="" />
                        </div>
                        <div className="right">
                          <h3>{item.goodsname}</h3>
                          <div className="footer">
                            <div className="price">
                              <span>￥{filterPrice(item.price)}</span>
                            </div>
                            <div className="num">
                                <button onClick={()=>changeNum(item.id,1)}>-</button>
                                <input type="text" value={item.num} onChange={()=>{}}/>
                                <button onClick={()=>{
                                  changeNum(item.id,2)}}>+</button>
                            </div>
                          </div>
                        </div>
                      </li></SwipeAction>
                    })}
            </ul>:<Empty
          style={{ padding: '64px 0' }}
          imageStyle={{ width: 128 }}
          description='暂无数据'
        />
        }
        </div>
    </div>
  )
}
